import React, { Component } from 'react';

// export default function App() {
//   return <h1>hello world</h1>;
// }

const suffix='被调用，this指向：';

export default class App extends Component { // eslint-disable-line

    componentWillMount() {
        console.log('componentWillMount 渲染前调用. this' + this);
    }

    componentDidMount() {
        console.log('componentWillMount 第一次渲染后调用. this:', this);
    }

    componentWillReceiveProps(nextProps){
        console.log('componentWillReceiveProps 第一次渲染后调用. this:' , this);
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate 返回一个布尔值。' +
            '在组件接收到新的props或者state时被调用。' +
            '在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用');
    }

    componentWillUnmount() {
        console.log('componentWillUpdate 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。this', this);
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('componentDidUpdate在组件完成更新后立即调用。在初始化时不会被调用。');
    }

    componentWillUnmount() {
        console.log('omponentWillUnmount在组件从DOM中移除的时候立刻被调用');
    }

    handler(){
        console.log(`handler${suffix}`, this);
    }
    render() {
        return (
            <div>
                <p onClick={this.handler}>点击测试this指向,看log</p>
                <p onClick={this.handler.bind(this)}>点击测试this指向,看log</p>
            </div>
        )
    }
}
